<template>
  <div class="allocation-input">
    <!-- 步骤条 -->
    <div class="steps-container">
      <el-steps class="custom-steps" :active="currentStep" finish-status="success">
        <el-step title="选择层次" :icon="Edit" />
        <el-step title="录入数据" :icon="MessageBox" />
      </el-steps>
    </div>

    <!-- 第一步：选择层次 -->
    <div v-if="currentStep === 0" class="step-content">
      <div class="layer-selection">
        <div class="selection-title">
          <h3>请选择数据录入的起始层次</h3>
          <p class="selection-desc">选择起始层次后，系统将自动生成该层次及以下层次的数据录入表单</p>
        </div>
        <div class="layer-options">
          <div
            v-for="(layer, index) in layers"
            :key="layer.value"
            class="layer-option"
            :class="{ selected: selectedLayer === layer.value }"
            @click="selectedLayer = layer.value"
          >
            <div class="layer-icon">
              <el-icon :size="24" :color="selectedLayer === layer.value ? '#009688' : '#909399'">
                <component :is="layer.icon" />
              </el-icon>
            </div>
            <div class="layer-info">
              <h4>{{ layer.label }}</h4>
              <p>{{ layer.description }}</p>
            </div>
            <div class="layer-number">{{ 4 - index }}</div>
          </div>
        </div>
      </div>
      <div class="step-buttons">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" :disabled="!selectedLayer" @click="nextStep">下一步</el-button>
      </div>
    </div>

    <!-- 第二步：录入数据 -->
    <div v-else class="step-content">
      <div class="table-container">
        <el-tabs v-model="activeTab">
          <!-- 总能耗 Tab -->
          <el-tab-pane label="总能耗" name="total">
            <div class="table-actions">
              <el-button type="primary" link :icon="CirclePlus" @click="addTotalEnergy" v-if="!hasTotalEnergy"> 添加 </el-button>
            </div>
            <el-table :data="totalEnergyData" border height="300">
              <el-table-column prop="waterUsage" label="水能(m³)" />
              <el-table-column prop="gasUsage" label="天然气(m³)" />
              <el-table-column prop="oilUsage" label="柴油(L)" />
              <el-table-column prop="electricityUsage" label="电能(kWh)" />
              <el-table-column label="操作" width="170" fixed="right" align="center">
                <template #default="scope">
                  <el-button type="primary" link :icon="EditPen" @click="handleEdit(scope.row, 'total')">修改</el-button>
                  <el-button type="primary" link :icon="DeleteFilled" @click="removeTotalEnergy(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <!-- 动态生成其他层次的 Tab -->
          <el-tab-pane v-for="tab in visibleTabs" :key="tab.name" :label="tab.label" :name="tab.name">
            <div class="table-actions">
              <el-button
                v-if="
                  tab.name !== 'equipment' &&
                  tab.name !== 'process' &&
                  (tab.name !== 'organization' || tableData[tab.name].length === 0)
                "
                type="primary"
                link
                :icon="CirclePlus"
                @click="addRow(tab.name)"
              >
                添加
              </el-button>
            </div>
            <el-table :data="tableData[tab.name]" border height="300">
              <el-table-column v-for="col in tab.columns" :key="col.prop" :label="col.label" :prop="col.prop" />
              <el-table-column label="操作" width="170" fixed="right" align="center">
                <template #default="scope">
                  <el-button type="primary" link :icon="EditPen" @click="handleEdit(scope.row, tab.name)"> 修改 </el-button>
                  <el-button
                    v-if="tab.name !== 'equipment' && tab.name !== 'process'"
                    type="primary"
                    link
                    :icon="DeleteFilled"
                    @click="removeRow(tab.name, scope.$index)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div class="step-buttons">
        <el-button @click="prevStep">上一步</el-button>
        <el-button type="primary" @click="saveData">保存</el-button>
      </div>
    </div>

    <!-- 数据录入对话框 -->
    <el-dialog
      v-model="inputDialogVisible"
      :title="isEdit ? '修改数据' : '添加数据'"
      width="650px"
      @open="formRef?.clearValidate()"
      class="allocation-input-dialog"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="180px"
        style="width: 90%; margin: 20px auto"
        :validate-on-rule-change="false"
      >
        <template v-if="activeTab === 'total'">
          <el-form-item label="水能" prop="waterUsage">
            <el-input
              v-model="formData.waterUsage"
              type="number"
              placeholder="请输入用水量"
              style="width: 300px"
              @input="validateNumber('waterUsage')"
            >
              <template #append>m³</template>
            </el-input>
          </el-form-item>
          <el-form-item label="天然气" prop="gasUsage">
            <el-input
              v-model="formData.gasUsage"
              type="number"
              placeholder="请输入用气量"
              style="width: 300px"
              @input="validateNumber('gasUsage')"
            >
              <template #append>m³</template>
            </el-input>
          </el-form-item>
          <el-form-item label="柴油" prop="oilUsage">
            <el-input
              v-model="formData.oilUsage"
              type="number"
              placeholder="请输入用油量"
              style="width: 300px"
              @input="validateNumber('oilUsage')"
            >
              <template #append>L</template>
            </el-input>
          </el-form-item>
          <el-form-item label="电能" prop="electricityUsage">
            <el-input
              v-model="formData.electricityUsage"
              type="number"
              placeholder="请输入用电量"
              style="width: 300px"
              @input="validateNumber('electricityUsage')"
            >
              <template #append>kWh</template>
            </el-input>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item v-for="col in currentTabColumns" :key="col.prop" :label="col.label" :prop="col.prop">
            <el-input
              v-model="formData[col.prop]"
              :type="isNumericField(col.prop) ? 'number' : 'text'"
              :placeholder="`请输入${col.label}`"
              :readonly="isReadOnlyField(activeTab, col.prop)"
              style="width: 300px"
              @input="isNumericField(col.prop) ? validateNumber(col.prop) : null"
            />
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="inputDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirmAdd">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, nextTick, watch } from "vue";
import type { TabConfig } from "./types";
import { Edit, MessageBox, Box, Cpu, Tools, DeleteFilled, EditPen, CirclePlus } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";
import type { FormInstance } from "element-plus";
import { processNodeList } from "@/assets/mock/mockData";

interface Props {
  // 当前对象的类型和ID
  params: {
    projectId: string;
    typeId: string;
    id: string;
  };
  // 已有的分配数据
  existingData?: any;
}

const props = defineProps<Props>();
const emit = defineEmits(["close", "save"]);

const currentStep = ref(0);
const selectedLayer = ref("");
const activeTab = ref("total");

// 定义 formData 的类型
interface FormData {
  waterUsage: string;
  gasUsage: string;
  oilUsage: string;
  electricityUsage: string;
  [key: string]: string; // 允许其他动态字段
}

const formData = ref<FormData>({
  waterUsage: "",
  gasUsage: "",
  oilUsage: "",
  electricityUsage: ""
});

// 重置所有状态
const resetAllStates = () => {
  currentStep.value = 0;
  selectedLayer.value = "";
  activeTab.value = "total";
  totalEnergyData.value = [];
  tableData.value = {
    organization: [],
    productionLine: [],
    equipment: [],
    process: []
  };
};

// 监听对话框打开
watch(
  () => props.params,
  () => {
    resetAllStates();
    // 获取工艺流程数据并初始化设备和工艺表格
    const nodes = processNodeList.value.find(item => item.productId === props.params.id)?.nodes || [];

    // 初始化设备层数据
    tableData.value.equipment = nodes
      .filter(node => node?.equipment?.equipmentName)
      .map(node => ({
        equipmentName: node.equipment?.equipmentName || "",
        productionLine: "",
        estimatedEnergy: "",
        totalEstimatedEnergy: ""
      }));

    // 初始化工艺层数据
    // tableData.value.process = nodes.map(node => ({
    //   processName: node.process.processName,
    //   equipment: node.equipment?.equipmentName || "",
    //   processTime: "",
    //   totalProcessTime: "",
    //   processCount: "",
    //   totalProcessCount: ""
    // }));
  },
  { deep: true }
);

// 总能耗数据
const totalEnergyData = ref<any[]>([]);
const hasTotalEnergy = computed(() => totalEnergyData.value.length > 0);

// 各层次的表格数据
const tableData = ref<Record<string, any[]>>({
  organization: [],
  productionLine: [],
  equipment: [],
  process: []
});

// Tab
const tabConfigs: TabConfig[] = [
  {
    name: "organization",
    label: "组织层",
    level: 4,
    columns: [
      { prop: "directEnergy", label: "直接能耗" },
      { prop: "indirectEnergy", label: "间接能耗" }
    ]
  },
  {
    name: "productionLine",
    label: "产线层",
    level: 3,
    columns: [
      { prop: "lineName", label: "产线名称" },
      { prop: "productQuantity", label: "产品产量" },
      { prop: "totalProductQuantity", label: "所有产品产量" }
    ]
  },
  {
    name: "equipment",
    label: "设备层",
    level: 2,
    columns: [
      { prop: "equipmentName", label: "设备名称" },
      { prop: "productionLine", label: "所属产线" },
      { prop: "estimatedEnergy", label: "设备预计能耗" },
      { prop: "totalEstimatedEnergy", label: "所有设备预计能耗" }
    ]
  },
  {
    name: "process",
    label: "工序层",
    level: 1,
    columns: [
      { prop: "processName", label: "特征工序" },
      { prop: "equipment", label: "所属设备" },
      { prop: "processTime", label: "特征工序加工时长" },
      { prop: "totalProcessTime", label: "所有特征工序加工时长" },
      { prop: "processCount", label: "特征工序加工次数" },
      { prop: "totalProcessCount", label: "所有特征工序加工次数" }
    ]
  }
];

// 根据选择的层次显示对应的 Tab
const visibleTabs = computed(() => {
  if (!selectedLayer.value) return [];
  const selectedLevel = parseInt(selectedLayer.value);
  return tabConfigs.filter(tab => tab.level <= selectedLevel);
});

const inputDialogVisible = ref(false);
const formRef = ref<FormInstance>();

// 表单校验规则
const generateRules = (tabName: string) => {
  if (tabName === "total") {
    return {
      waterUsage: [{ required: true, message: "请输入用水量", trigger: ["blur", "submit"] }],
      gasUsage: [{ required: true, message: "请输入用气量", trigger: ["blur", "submit"] }],
      oilUsage: [{ required: true, message: "请输入用油量", trigger: ["blur", "submit"] }],
      electricityUsage: [{ required: true, message: "请输入用电量", trigger: ["blur", "submit"] }]
    };
  }

  const tab = tabConfigs.find(t => t.name === tabName);
  if (!tab) return {};

  return tab.columns.reduce((rules, col) => {
    // 对于设备层和工艺层，不设置 trigger，只在手动验证时触发
    if (tabName === "equipment" || tabName === "process") {
      rules[col.prop] = [{ required: true, message: `请输入${col.label}` }];
    } else {
      // 其他层级使用 blur 和 submit 触发
      rules[col.prop] = [{ required: true, message: `请输入${col.label}`, trigger: ["blur", "submit"] }];
    }
    return rules;
  }, {} as Record<string, any[]>);
};

const formRules = computed(() => generateRules(activeTab.value));

// 获取当前 tab 的列配置
const currentTabColumns = computed(() => {
  if (activeTab.value === "total") return [];
  return tabConfigs.find(tab => tab.name === activeTab.value)?.columns || [];
});

// 打开添加对话框
const openAddDialog = () => {
  formData.value = {
    waterUsage: "",
    gasUsage: "",
    oilUsage: "",
    electricityUsage: ""
  };
  isEdit.value = false;
  editingRow.value = null;
  inputDialogVisible.value = true;
  // 等待对话框打开后再重置表单，避免视觉闪烁
  nextTick(() => {
    formRef.value?.resetFields();
  });
};

// 监听对话框关闭
watch(inputDialogVisible, newVal => {
  if (!newVal) {
    // 对话框关闭时重置表单
    formRef.value?.resetFields();
  }
});

// 打开编辑对话框时重置表单验证状态
const openEditDialog = (row: any, tabName: string) => {
  isEdit.value = true;
  editingRow.value = row;
  activeTab.value = tabName;
  formData.value = { ...row };
  inputDialogVisible.value = true;
  // 等待 DOM 更新后重置表单验证状态
  nextTick(() => {
    if (formRef.value) {
      formRef.value.clearValidate();
    }
  });
};

// 确认添加数据
const handleConfirmAdd = async () => {
  if (!formRef.value) return;

  try {
    // 只在点击确定时进行验证
    await formRef.value.validate();

    if (isEdit.value) {
      Object.assign(editingRow.value, formData.value);
    } else {
      if (activeTab.value === "total") {
        totalEnergyData.value.push({ ...formData.value });
      } else {
        tableData.value[activeTab.value].push({ ...formData.value });
      }
    }
    inputDialogVisible.value = false;
    isEdit.value = false;
    editingRow.value = null;
  } catch (error) {
    ElMessage({
      type: "warning",
      message: "请完善必填项"
    });
  }
};

// 修改添加数据的方法
const addTotalEnergy = () => {
  openAddDialog();
};

// 删除总能耗数据
const removeTotalEnergy = async (index: number) => {
  try {
    await ElMessageBox.confirm("确认要删除该条数据吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    });
    totalEnergyData.value.splice(index, 1);
  } catch {
    // 用户取消删除操作
  }
};

// 添加行数据
const addRow = (tabName: string) => {
  // 设备层和工艺层不允许添加
  if (tabName === "equipment" || tabName === "process") {
    return;
  }
  activeTab.value = tabName;
  openAddDialog();
};

// 删除行数据
const removeRow = async (tabName: string, index: number) => {
  // 设备层和工艺层不允许删除
  if (tabName === "equipment" || tabName === "process") {
    return;
  }
  try {
    await ElMessageBox.confirm("确认要删除该条数据吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    });
    tableData.value[tabName].splice(index, 1);
  } catch {
    // 用户取消删除操作
  }
};

// 下一步
const nextStep = () => {
  currentStep.value++;
  // 选择层次后初始化设备和工艺数据
  const nodes = processNodeList.value.find(item => item.productId === props.params.id)?.nodes || [];

  // 初始化设备层数据
  tableData.value.equipment = nodes
    .filter(node => node?.equipment?.equipmentName)
    .map(node => ({
      equipmentName: node.equipment?.equipmentName || "",
      productionLine: "",
      estimatedEnergy: "",
      totalEstimatedEnergy: ""
    }));

  // 初始化工艺层数据 - 只包含有 order 值的工艺
  tableData.value.process = nodes
    .filter(node => node.order !== undefined) // 过滤掉 order 为 undefined 的工序
    .map(node => ({
      processName: node.process.processName,
      equipment: node.equipment?.equipmentName || "",
      processTime: "",
      totalProcessTime: "",
      processCount: "",
      totalProcessCount: ""
    }));
};

// 上一步
const prevStep = () => {
  currentStep.value--;
};

// 保存数据
const saveData = () => {
  // 检查总能耗数据
  if (totalEnergyData.value.length === 0) {
    ElMessage({
      type: "warning",
      message: "请至少填写一条总能耗数据",
      offset: 0, // 设置距离顶部的偏移量为0
      zIndex: 20001 // 确保消息显示在最上层
    });
    activeTab.value = "total";
    return;
  }

  // 只有当选择的起始层次包含设备层时才检查设备层数据完整性
  if (parseInt(selectedLayer.value) >= 2 && tableData.value.equipment.length > 0) {
    const incompleteEquipment = tableData.value.equipment.find(
      item => !item.productionLine || !item.estimatedEnergy || !item.totalEstimatedEnergy
    );
    if (incompleteEquipment) {
      ElMessage({
        type: "warning",
        message: `设备"${incompleteEquipment.equipmentName}"的数据不完整，请填写所有必填项`,
        offset: 0,
        zIndex: 20001
      });
      activeTab.value = "equipment";
      return;
    }
  }

  // 检查工艺层数据完整性
  if (tableData.value.process.length > 0) {
    const incompleteProcess = tableData.value.process.find(
      item => !item.processTime || !item.totalProcessTime || !item.processCount || !item.totalProcessCount
    );
    if (incompleteProcess) {
      ElMessage({
        type: "warning",
        message: `工序"${incompleteProcess.processName}"的数据不完整，请填写所有必填项`,
        offset: 0,
        zIndex: 20001
      });
      activeTab.value = "process";
      return;
    }
  }

  const selectedLevel = parseInt(selectedLayer.value);
  const validationErrors = [];

  if (selectedLevel >= 4) {
    if (tableData.value.organization.length === 0) {
      validationErrors.push("组织层");
    } else if (tableData.value.organization.length > 1) {
      ElMessage({
        type: "warning",
        message: "组织层只能录入一条数据"
      });
      activeTab.value = "organization";
      return;
    }
  }
  if (selectedLevel >= 3 && tableData.value.productionLine.length === 0) {
    validationErrors.push("产线层");
  }
  // 只有当选择的起始层次包含设备层时才校验设备层数据
  if (selectedLevel >= 2 && tableData.value.equipment.length === 0 && visibleTabs.value.some(tab => tab.name === "equipment")) {
    validationErrors.push("设备层");
  }
  if (tableData.value.process.length === 0) {
    validationErrors.push("工序层");
  }

  if (validationErrors.length > 0) {
    ElMessage({
      type: "warning",
      message: `请至少在${validationErrors.join("、")}填写一条数据`
    });
    const firstError = validationErrors[0];
    const tabName = {
      组织层: "organization",
      产线层: "productionLine",
      设备层: "equipment",
      工序层: "process"
    }[firstError];
    if (tabName) {
      activeTab.value = tabName;
    }
    return;
  }

  const data = {
    projectId: props.params.projectId,
    objectId: props.params.id,
    objectType: props.params.typeId,
    startLayerId: selectedLayer.value,
    totalEnergy: totalEnergyData.value[0],
    organizationLevel: selectedLayer.value === "4" ? tableData.value.organization : undefined,
    productionLineLevel: ["4", "3"].includes(selectedLayer.value) ? tableData.value.productionLine : undefined,
    equipmentLevel: ["4", "3", "2"].includes(selectedLayer.value) ? tableData.value.equipment : undefined,
    processLevel: tableData.value.process
  };
  emit("save", data);

  // 显示保存成功的消息
  ElMessage({
    type: "success",
    message: "保存成功",
    offset: 0,
    zIndex: 20001
  });
};

// 关闭对话框
const closeDialog = () => {
  const hasData = totalEnergyData.value.length > 0 || Object.values(tableData.value).some(arr => arr.length > 0);

  if (hasData) {
    ElMessageBox.confirm("确认要关闭吗？未保存的数据将会丢失", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        emit("close");
      })
      .catch(() => {});
  } else {
    emit("close");
  }
};

// 添加编辑相关的变量和方法
const isEdit = ref(false);
const editingRow = ref<any>(null);

const handleEdit = (row: any, tabName: string) => {
  openEditDialog(row, tabName);
};

const layers = [
  {
    label: "组织层",
    value: "4",
    icon: Box,
    description: "生产制造商的能源消耗数据"
  },
  {
    label: "产线层",
    value: "3",
    icon: Box,
    description: "生产线的能源分配数据"
  },
  {
    label: "设备层",
    value: "2",
    icon: Cpu,
    description: "生产设备的能源分配数据"
  },
  {
    label: "工序层",
    value: "1",
    icon: Tools,
    description: "生产工序的能源分配数据"
  }
];

// 判断字段是否只读
const isReadOnlyField = (tabName: string, fieldName: string) => {
  if (tabName === "equipment" && fieldName === "equipmentName") {
    return true;
  }
  if (tabName === "process" && (fieldName === "processName" || fieldName === "equipment")) {
    return true;
  }
  return false;
};

// 判断字段是否为需要数字校验的字段
const isNumericField = (fieldName: string) => {
  const numericFields = [
    "directEnergy",
    "indirectEnergy",
    "productTime",
    "totalTime",
    "productQuantity",
    "totalProductQuantity",
    "estimatedEnergy",
    "totalEstimatedEnergy",
    "processTime",
    "totalProcessTime",
    "processCount",
    "totalProcessCount"
  ];
  return numericFields.includes(fieldName);
};

// 添加数字验证方法
const validateNumber = (field: string) => {
  if (isNaN(Number(formData.value[field]))) {
    formData.value[field] = formData.value[field].replace(/[^0-9.]/g, "");
  }
  // 移除开头的零
  formData.value[field] = formData.value[field].replace(/^0+(?=\d)/, "");
};
</script>

<style>
/* 使用全局样式，不加 scoped */
.el-message {
  top: 0 !important;
  z-index: 99999 !important;
}

/* 修改蒙层的 z-index */
.el-overlay {
  z-index: 2000 !important;
}
</style>

<style scoped>
.allocation-input {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 5px;
}
.steps-container {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 5px 0;
}
.steps-wrapper {
  margin-bottom: 15px;
}
.step-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.layer-selection {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 5px;
}
.selection-title {
  margin-bottom: 10px;
  text-align: center;
}
.selection-title h3 {
  margin-bottom: 5px;
  font-size: 20px;
  color: #303133;
}
.selection-desc {
  font-size: 14px;
  color: #909399;
}
.layer-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 600px;
  margin-top: 5px;
}
.layer-option {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #e6f5f3;
  border-radius: 8px;
  transition: all 0.3s;
}
.layer-option:hover {
  border-color: #009688;
  box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
  transform: translateY(-2px);
}
.layer-option.selected {
  background: #e6f5f3;
  border-color: #009688;
}
.layer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 20px;
  background: #e6f5f3;
  border-radius: 8px;
}
.layer-info {
  flex: 1;
}
.layer-info h4 {
  margin-bottom: 8px;
  font-size: 15px;
  color: #303133;
}
.layer-info p {
  margin: 0;
  font-size: 13px;
  color: #909399;
}
.layer-number {
  margin-left: 20px;
  font-size: 20px;
  font-weight: bold;
  color: #e6f5f3;
}
.layer-option.selected .layer-number {
  color: #009688;
}
.step-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}
.table-container {
  flex: 1;
  margin-bottom: 20px;
  overflow: hidden;
}
.table-container :deep(.el-tabs__content) {
  height: calc(100% - 40px);
  overflow: auto;
}
.table-container :deep(.el-tab-pane) {
  height: 100%;
  padding: 20px;
}
.table-actions {
  margin-bottom: 15px;
}
.custom-steps {
  width: 50%;
}
.custom-steps :deep(.el-step__head.is-process) {
  color: #009688;
  border-color: #009688;
}
.custom-steps :deep(.el-step__head.is-success) {
  color: #009688;
  border-color: #009688;
}
.custom-steps :deep(.el-step__title.is-process) {
  color: #009688;
}
.custom-steps :deep(.el-step__title.is-success) {
  color: #009688;
}
.custom-steps :deep(.el-step__line) {
  background-color: #e6f5f3;
}
.custom-steps :deep(.el-step__line.is-process) {
  background-color: #009688;
}
.custom-steps :deep(.el-step__icon.is-text) {
  background-color: #e6f5f3;
  border-color: #009688;
}
.custom-steps :deep(.el-step__icon.is-text.is-process) {
  background-color: #009688;
}
.custom-steps :deep(.el-step__icon.is-text.is-success) {
  background-color: #009688;
}
.custom-steps :deep(.el-step__icon-inner) {
  font-weight: bold;
}
.allocation-input-dialog :deep(.el-dialog__body) {
  display: flex;
  justify-content: center;
  padding: 0 20px 30px;
}
.allocation-input-dialog :deep(.el-form-item__label) {
  padding-right: 20px;
  white-space: nowrap;
}
.allocation-input-dialog :deep(.el-input-group__append) {
  padding: 0 10px;
}
</style>
